import { Liquid } from '@antv/g2plot';
import { useEffect, useState } from 'react';
//唯一id，颜色，数值，文本，大小
const LiquidPlot = ({ ids, color, percent, textinfo, size }) => {
  const [liquidPlot, setLiquidPlot] = useState(null);
  useEffect(() => {
    //数值更新销毁重绘
    if (liquidPlot !== null) {
      liquidPlot.destroy();
    }
    const liquidPlot1 = new Liquid('lqchart' + ids, {
      //新建
      percent: percent, //百分比
      width: size,
      height: size,
      liquidStyle: {
        //水波样式
        lineWidth: 10,
        strokeOpacity: 0.7,
        lineDash: [3, 5],
        fill: color,
        stroke: color,
      },
      statistic: {
        // 文本配置
        title: {
          formatter: (v) => {
            return v.percent * 100 + '%';
          },
          style: {
            fontSize: size / 9,
            color: '#093049',
          },
        },
        content: {
          content: textinfo,
          style: {
            fontSize: size / 15,
            color: '#093049',
          },
        },
      },
    });
    liquidPlot1.render();
    setLiquidPlot(liquidPlot1);
  }, [color, percent, textinfo, size]);
  return <div id={'lqchart' + ids}></div>;
};
export default LiquidPlot;
